<div class="section-header">
  <h1 class="h3 section-text">Editable forms</h1>
</div>
<div class="p-3 relative">
  <div class="row">
    <div class="col-sm-12">
      <div class="card-box">
        <div class="row">
          <div class="col-lg-6">
            <div class='card'>
              <div class='card-block'>
                <h4 class="m-b-30 card-title font-thin">Inline Editor</h4>
                <form action="#" class="form-horizontal">
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Simple Text Field</label>
                    <div class="col-sm-7">
                      <a href="#" id="inline-name" data-type="text" data-pk="1" data-title="Enter name">superuser</a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Empty text field, required</label>
                    <div class="col-sm-7">
                      <a href="#" id="inline-firstname" data-type="text" data-pk="1" data-placement="right"
                         data-placeholder="Required" data-title="Enter your firstname"></a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Select, local array, custom display</label>
                    <div class="col-sm-7">
                      <a href="#" id="inline-sex" data-type="select" data-pk="1" data-value=""
                         data-title="Select sex"></a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Select, error while loading</label>
                    <div class="col-sm-7">
                      <a href="#" id="inline-status" data-type="select" data-pk="1" data-value="0" data-source="/status"
                         data-title="Select status">Active</a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Combodate</label>
                    <div class="col-sm-7">
                      <a href="#" id="inline-dob" data-type="combodate" data-value="2015-09-24" data-format="YYYY-MM-DD"
                         data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1"
                         data-title="Select Date of birth"></a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Textarea, buttons below. Submit by <i>ctrl+enter</i></label>
                    <div class="col-sm-7">
                      <a href="#" id="inline-comments" data-type="textarea" data-pk="1"
                         data-placeholder="Your comments here..." data-title="Enter comments">awesome user!</a>
                    </div>
                  </div>

                </form>
              </div>
            </div>
          </div>

          <div class="col-lg-6">
            <div class='card'>
              <div class='card-block'>
                <h4 class="m-b-30 card-title font-thin">Popover Editor</h4>
                <form action="#" class="form-horizontal editor-horizontal">
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Simple Text Field</label>
                    <div class="col-sm-7">
                      <a href="#" id="name" data-type="text" data-pk="1" data-title="Enter name">superuser</a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Empty text field, required</label>
                    <div class="col-sm-7">
                      <a href="#" id="firstname" data-type="text" data-pk="1" data-placement="right"
                         data-placeholder="Required" data-title="Enter your firstname"></a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Select, local array, custom display</label>
                    <div class="col-sm-7">
                      <a href="#" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex"></a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Select, error while loading</label>
                    <div class="col-sm-7">
                      <a href="#" id="status" data-type="select" data-pk="1" data-value="0" data-source="/status"
                         data-title="Select status">Active</a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Combodate</label>
                    <div class="col-sm-7">
                      <a href="#" id="dob" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD"
                         data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1"
                         data-title="Select Date of birth"></a>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-sm-5 control-label">Textarea, buttons below. Submit by <i>ctrl+enter</i></label>
                    <div class="col-sm-7">
                      <a href="#" id="comments" data-type="textarea" data-pk="1"
                         data-placeholder="Your comments here..." data-title="Enter comments">awesome user!</a>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

